<template>
<div>
<el-container class="forum-container" style="margin-top: 20px">
  <div class="forum">
    <W-ForumList :Forums="Forums"></W-ForumList>
    <div class="page">
        <el-pagination
          @current-change="handleCurrentChange($event,index)"
          :background="true"
          layout="prev, pager, next"
          :current-page="currentPage"
          :page-size="pageSize"
          :total="total">
        </el-pagination>
    </div>
  </div>
  <div class="forum-right">
    <W-ForumRight></W-ForumRight>
  </div>
</el-container>
</div>
</template>

<script>
import ForumList from '../Forum/ForumList'
import ForumRight from '../Forum/ForumRight'
export default {
  data () {
    return {
      Forums: [],
      total: 0,
      currentPage: 1,
      pageSize: 10
    }
  },
  components: {
    'W-ForumList': ForumList,
    'W-ForumRight': ForumRight
  },
  methods: {
    getAllForums () {
      this.$axios.get('forum/getAllForum', {
        params: {
          current: 1,
          size: 10
        }
      }).then(response => {
        console.log(response.data)
        this.$set(this, 'Forums', response.data.data.records)
        this.total = response.data.data.total
        this.pageSize = response.data.data.size
        this.currentPage = response.data.data.current
      }).catch(error => {
        console.log(error)
      })
    },
    handleCurrentChange (val, index) {
      this.$axios.get('forum/getAllForum', {
        params: {
          current: val,
          size: 10
        }
      }).then(response => {
        console.log(response.data)
        this.$set(this, 'Forums', response.data.data.records)
        this.total = response.data.data.total
        this.pageSize = response.data.data.size
        this.currentPage = response.data.data.current
      }).catch(error => {
        console.log(error)
      })
    }
  },
  mounted () {
    this.getAllForums()
  }
}
</script>

<style lang="less" scoped>
.forum-container{
  display: flex;
}
.forum{
  margin-right: 0px;
}
.page{
  text-align: center;
}
.forum-right{
}
</style>
